<!--  -->
<template>
  <div class="loginbg">
    <div class="btn_tab">
      <span class="regin" @click="toLogin">登录</span>
    </div>
    <p class="title_welcome">欢迎使用源聚通</p>
    <div class="formBox">
      <van-field v-model="mobile" type="tel" clearable placeholder="请填写手机号" />
      <van-field style="margin-top:20px" v-model="password" :type="islook ? 'text' : 'password'" placeholder="请设置密码">
        <template #right-icon >
          <van-icon @click="lookPass" name="eye-o" />
        </template>
      </van-field>
      <van-field style="margin-top:20px" v-model="spassword" :type="islook2 ? 'text' : 'password'" placeholder="请再次确认密码">
        <template #right-icon>
          <van-icon @click="lookPass2" name="eye-o" />
        </template>
      </van-field>
      <van-field style="margin-top:20px;" v-model="image_code" placeholder="请输入图形验证码">
        <template #right-icon>
          <van-image width="120" height="50" :src="base64Image" @click="getImageCode" />
        </template>
      </van-field>
      <van-field style="margin-top:20px" v-model="code" center clearable placeholder="请输入短信验证码">
        <template #button>
          <van-button v-if="!smsShow" size="small" @click="sendcode" type="danger">获取验证码</van-button>
          <van-count-down style="color:#C2C2C2" @finish="finishtime" v-if="smsShow" :time="times" format=" ss秒后重新获取" />
        </template>
      </van-field>

      <van-field style="margin-top:20px" v-model="t_mobile" placeholder="推荐人手机号（没有可不填写）" />
      <!-- <p class="forget">忘记密码?</p> -->
      <van-checkbox style="margin-top:20px" v-model="checked">我已阅读并同意《用户协议》《隐私协议》</van-checkbox>

      <van-button class="btn_charge" type="danger" @click="handleSubmit">注册</van-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Fetch from "../../utils/fetch";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "regis"
  },
  data() {
    //这里存放数据
    return {
      times: 60 * 1000,
      smsShow: false,
      mobile: "",
      tel2: "",
      password: "",
      spassword: "",
      base64Image: "",
      image_code: "",
      agree: false,
      code: "",
      t_mobile: "",

      time: 0,
      bg: "",
      data: {
        t_mobile: ""
      },
      base64Image: "",
      is_t_inp: false,
      is_send: false,
      checked: false,
      psd: "password",
      config: {},
      islook:false,
      islook2:false,
      
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    lookPass(){
      this.islook=!this.islook;
    },
    lookPass2(){
      this.islook2=!this.islook2;
    },
    finishtime() {
      this.smsShow = false;
    },

    getcode() {
    },
    toLogin() {
      this.$router.push({ path: "/login" });
    },
    getImageCode() {
      Fetch("/api/api/imageCode").then(res => {
        this.base64Image = res.data.code;
      });
    },
    start() {
      Fetch("/api/api/webconfig", { type: "bg" }).then(res => {
        this.bg = 'url("' + res.data.reg + '")';
      });
      Fetch("/api/api/webconfig", { type: "web" }).then(res => {
        this.config = res.data;
      });
    },
    sendcode() {
      // if (this.is_send) {
      //   return;
      // }

      if (!this.mobile) {
        this.$notify({
          message: "请输入手机号",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.image_code) {
        this.$notify({
          message: "请输入图片验证码",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      // this.is_send = true;

      Fetch("/api/api/code", {
        image_code: this.image_code,
        type: "register",
        mobile: this.mobile
      })
        .then(() => {
      this.smsShow = true;

          // this.time = 60 * 1000;
          this.$notify({
            background: "#EAF1FF",
            color: "#3292FF",
            message: "发送成功"
          });
          this.getImageCode();
        })
        .catch(() => {
          this.is_send = false;
          this.getImageCode();
        });
    },

    handleSubmit() {
      var params = {
        code: this.code,
        image_code: this.image_code,
        mobile: this.mobile,
        password: this.password,
        spassword: this.spassword
      };
      if (!this.mobile) {
        this.$notify({
          message: "请输入您的手机号",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.password) {
        this.$notify({
          message: "请输入登录密码",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (this.password !== this.spassword) {
        this.$notify({
          message: "两次输入的密码不一至",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.code) {
        this.$notify({
          message: "请输入验证码",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.checked) {
        this.$notify({
          message: "请同意用户协议",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      Fetch("/api/api/register", {
        code: this.code,
        image_code: this.image_code,
        mobile: this.mobile,
        password: this.password,
        spassword: this.spassword
      }).then(res => {
        var bslua = navigator.userAgent;
        var isAndroid =
          bslua.indexOf("Android") > -1 || bslua.indexOf("Adr") > -1;
        var isiOS = !!bslua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

        this.$notify({
          background: "#EAF1FF",
          color: "#3292FF",
          message: "注册成功"
        });
        this.$router.replace("/vip");
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.start();
    this.getImageCode();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.content .getsms {
  display: inline-block;
  width: 88px;
  height: 34px;
  line-height: 34px;
  border-radius: 4px;
  text-align: center;
  background: linear-gradient(
    90deg,
    rgba(202, 162, 98, 1) 0%,
    rgba(226, 195, 151, 1) 100%
  );
  color: #7d5319;
  font-size: 14px;
}
.loginbg {
  width: 100%;
  height: 100%;
  background: url("../../assets/loginbg.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 60px;
}
.btn_tab {
  height: 83px;
  width: 100%;
  display: flex;
  align-items: center;
  /* line-height: 83px; */
  /* text-align: right; */
  justify-content: flex-end;
  color: #ff3927;
  font-size: 16px;
  font-weight: 500;
}
.regin {
  padding-right: 30px;
}
.title_welcome {
  font-size: 28px;
  font-weight: 600;
  color: #2d2d2d;
  line-height: 40px;
  padding-left: 30px;
}
.formBox {
  width: 320px;
  /* margin-top: 70px; */
  margin: auto;
  padding-top: 70px;
}
.forget {
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: #818181;
  padding-right: 10px;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 50px;
}
</style>